Add animation effect to ajax response

[amirehsan1370]

I had below code to load contents with ajax, and I want to add an animation to contents when loaded.
for example animations from this page

jQuery(document).ready(function(){
jQuery(document).on('click','.loadmorebtn',function(){
var ajaxurl = dcs_frontend_ajax_object.ajaxurl;
jQuery.ajax({
type: "POST",
url: ajaxurl,
data: ({
action: "dcsAjaxLoadMorePostsAjaxReq",
}),
success: function(response){
if (!jQuery.trim(response)){
$('.loadmore_button p').addClass('enddd');
}else{
jQuery(response).insertAfter(jQuery('.loadMoreRepeat').last());
}
},
beforeSend: function() {
/*...... /
},
complete: function(){
/...... */
},
});
});
});

I added below code after success (line 10), but when ajax items loaded animation fired on all items which loaded before and loading now!
anime({ targets: '.loadMoreRepeat', scale: [.5, 1]});
demo link

is there any idea to fire anime-js just on new items loaded?
Sorry if this is not the place for this question 🙏

[juliangarnier]

You need a way to only target the new added elements.
Maybe something like this:

// Store the count of existing items before adding new ones
const existingCount = $('.loadMoreRepeat').length;

// Insert the new content

// Select only the newly added items
const newItems = $('.loadMoreRepeat').slice(existingCount);

// Animate only the new items (v4 syntax)
animate(newItems, {
  scale: [.5, 1]
});

Closing for now but feel free to re-open if it doesn't answer your question.